<script>
import {getUserMenuTree} from "@/api/sys/menu/menu";
import cache from "@/plugins/cache";
import {userLoginOut} from "@/api/login/login";
import {userinfo} from "@/constants/userConstant";
import MyNev from "@/views/home/my-nev.vue";

export default {
  name: "home",
  components: {MyNev},
  data(){
    return {
      activeIndex: '1',
      activeIndex2: '1',
      server:{
        logo:'',
        title:'AI视频分析平台'
      },
      messageSum:0,
      username:'',
      menuList:[]
    };
  },
  methods: {
    goto(path){
      this.$router.push({ path:  path }).catch(()=>{});
    },
    loginout(){
      let userId = cache.local.getUserId();
      var params = new FormData();
      params.append("username",userId)
      userLoginOut(params).then(resp=>{
        cache.local.remove(userinfo)
        this.$router.push({ path:  '/' }).catch(()=>{});
      })
    },

  },
  created() {
    // this.$router.push({ path:  "/overview" }).catch(()=>{});
    // 获取用户昵称
    this.username = cache.local.getUserName();
    let userId = cache.local.getUserId()
    getUserMenuTree(userId).then(resp=>{
      this.menuList = resp.data
      // todo 添加动态路由
      // router.addRoute()
      console.log(resp)
    })
  }
}
</script>

<template>
  <div id="app-home">
    <div id="header" class="header">
      <div  class="logo">
        <!-- <img src="@/assets/img/logo.png" class="linklogo"> -->
        <span  class="title-sty">{{server.title}}</span>
      </div>
      <div class="nav-box">
        <my-nev :menuList="menuList"></my-nev>
      </div>
      <ul class="admin">
        <li>
          <el-badge :value="messageSum">
            <el-button size="small">消息</el-button>
          </el-badge>
        </li>
        <li class="user-info">
          <el-dropdown trigger="hover">
              <span class="el-dropdown-link" style="color: white">
                {{username}}
              </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="loginout">
                <i class="el-icon-switch-button" style="color: #1296db;"></i>
                退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>

    <div class="fullscreen-container">
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style scoped>
.header {
  /* background-image: url("@/assets/img/nav-bac.png"); */
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
  background-color: #3974cc98;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 80px;
  min-width: 1190px;
}
.logo {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.logo img {
  height: 100%;
  margin-left: 15px;
}
.title-sty{
  font-size: 30px;
  margin-left: 30px;
}
.admin {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 10%;
}
li{
  list-style: none;
}
.nav-box{
  width: 50%;
  height: 100px;
  position: relative;
  z-index: 1;
}

.user-info{
  cursor: pointer;
}



</style>

